package tech.aistar.prj.controller;

import tech.aistar.prj.model.dto.VideoDTO;
import tech.aistar.prj.util.DateUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;

@WebServlet(urlPatterns = "/video/indexView")
public class IndexViewController extends HttpServlet {
    @SuppressWarnings("all")
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //TODO... 从作用域中获取数据
        List<VideoDTO> videoDTOList = (List<VideoDTO>) req.getAttribute("videoList");

        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println("<!DOCTYPE html>");
        out.println("<html lang='en'>");
        out.println("<head>");
        out.println("<meta charset='UTF-8'>");
        out.println("<meta http-equiv='X-UA-Compatible' content='IE=edge'>");
        out.println("<meta name='viewport' content='width=device-width, initial-scale=1.0'>");
        out.println("<title>首页");out.println("</title>");
        out.println("<!-- 引入bootstrap.css - 开发环境/bootstrap.min.css - 生产环境-->");
        out.println("<link rel='stylesheet' href='/st/plugins/bootstrap-3.4.1-dist/css/bootstrap.css'>");

        out.println("<link rel='stylesheet' href='/st/css/video/index.css'>");
        out.println("</head>");
        out.println("<body>");

        //TODO... 搜索区域begin
        out.println("<div>");
        out.println("<div class='row' style='margin-top:20px'>");
        //可以在最外层添加一个form表单 - 不是为了做提交的
        out.println("<form id='login_form'>");
        out.println("<div class='col-md-2'>");
        //TODO... 查询条件进行回显
        //String title = (String) req.getAttribute("title");
        Map<String,String> dataMap = (Map<String, String>) req.getAttribute("dataMap");

        out.println("<input type='text' value='"+dataMap.get("title")+"' name='title' class='form-control' placeholder='请输入视频标题'>");
        out.println("</div>");
        out.println("<div class='col-md-2'>");

        //String username = (String) req.getAttribute("username");

        out.println("<input type='text' value='"+dataMap.get("username")+"' name='username' class='form-control' placeholder='请输入主播名称'>");
        out.println("</div>");
        out.println("<div class='col-md-2'>");

        // String likes = (String) req.getAttribute("likes");

        out.println("<input type='text' value='"+dataMap.get("likes")+"' name='likes' class='form-control' placeholder='请输入点赞量'>");
        out.println("</div>");
        out.println("<div class='col-md-2'>");

        //String score = (String) req.getAttribute("score");

        out.println("<input type='number' value='"+dataMap.get("score")+"' step='0.5' max='10' min='0' name='score' class='form-control' placeholder='请输入视频评分'>");
        out.println("</div>");
        out.println("<div class='col-md-2'>");
        out.println("<input type='button' id='search_btn' class='btn btn-info' value='搜索'>");
        out.println("</div>");
        out.println("</form>");
        out.println("</div>");
        out.println("</div>");
        //TODO... 搜索区域end


        out.println("<div class='container-fluid'>");
        out.println("<div class='row'>");
        out.println("<div class='table-responsive'>");
        out.println("<table class='table'>");
        out.println("   <caption>视频统计信息");out.println("</caption>");
        out.println("   <thead>");
        out.println("       <tr style='color:#333'>");
        out.println("           <th>");out.println("<input type='checkbox'>");out.println("</th>");
        out.println("           <th>序号");out.println("</th>");
        out.println("           <th>标题");out.println("</th>");
        out.println("           <th>封面");out.println("</th>");
        out.println("           <th>上传日期");out.println("</th>");
        //TODO... 增加升序降序标志
        out.println("           <th>点赞数&nbsp;&nbsp;<span onclick='sort_index(1)' class='text-warning glyphicon glyphicon-sort-by-attributes'></span>&nbsp;&nbsp;<span onclick='sort_index(2)' class='text-info glyphicon glyphicon-sort-by-attributes-alt'></span>");out.println("</th>");
        out.println("           <th>评分");out.println("</th>");
        out.println("           <th>发布者");out.println("</th>");
        out.println("       </tr>");
        out.println("   </thead>");
        out.println("   <tbody id='content'>");
        //TODO...
        for (int i = 0; i < videoDTOList.size(); i++) {
            out.println("   <tr>");
            out.println("       <td><input type='checkbox'></td>");
            out.println("       <td>"+(i+1)+"</td>");
            out.println("       <td>"+videoDTOList.get(i).getVideo().getTitle()+"</td>");
            out.println("       <td><img src='/st/imgs/"+videoDTOList.get(i).getVideo().getVideoUrl()+"'></td>");
            out.println("       <td>"+ DateUtil.format(videoDTOList.get(i).getVideo().getCreateDate(),"yyyy-MM-dd HH:mm:ss") +"</td>");
            out.println("       <td>"+videoDTOList.get(i).getVideo().getLikes()+"&nbsp;&nbsp;<span class='glyphicon glyphicon-thumbs-up' style='color:red'></span></td>");
            out.println("       <td>"+ videoDTOList.get(i).getVideo().getScore()+"</td>");
            out.println("       <td>"+ videoDTOList.get(i).getUsername()+"</td>");
            out.println("   </tr>");
        }

        out.println("   </tbody>");
        out.println("</table>");
        out.println("</div>");
        out.println("</div>");
        out.println("</div>");

        out.println("<script src='/st/plugins/jquery.min.js'>");out.println("</script>");

        //out.println("<!-- 引入bootstrap.js/bootstrap.min.js,bootstrap依赖于jquery框架 -->");
        out.println("<script src='/st/plugins/bootstrap-3.4.1-dist/js/bootstrap.js'>");out.println("</script>");
        out.println("<script src='/st/js/video/index.js'>");out.println("</script>");//out.println("<script src='/st/js/video/index.js'>");out.println("</script>");
        out.println("</body>");
        out.println("</html>");

    }

}
